<style>
  * {
    padding: 0px;
    margin: 0px;
    color: rgb(91, 91, 91);
    font-size: 14px;
  }

  .content {
    text-align: center;
    margin: 0 auto;
    width: 400px;
    border: 1px solid rgb(133, 133, 133);
  }

  div {
    margin: 10px 0px 10px 0px;
  }

  input {
    height: 50px;
    line-height: 50px;
    width: 100%;
    padding-left: 10px;
  }

  button {
    width: 80px;
    height: 30px;
    line-height: 30px;
  }

  .query {
    text-align: left;
    border-bottom: 1px solid rgb(71, 71, 71);
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .qs {
    text-align: left;
    height: 200px;
    overflow-y: scroll;
  }

  .qs input,
  .qs label {
    width: 20px;
    line-height: 20px;
    height: 20px;
    vertical-align: middle;
    margin-left: 10px;
  }

  .qs div {
    border-bottom: 1px solid rgb(133, 133, 133);
    margin-left: 20px;
    margin-right: 20px;
    padding: 5px;
    height: 24px;
    line-height: 24px;
  }

  .btn {
    width: 400px;
    text-align: center;
    border: 0px;
    position: fixed;
    bottom: 0px;
  }
</style>
<div class="content">
  <div class="query">
    <label>正则表达式:</label><br />
    <input id="regex" value="" disabled></input>
  </div>
  <div style="text-align: left;padding-left: 20px;"> <label>建议:</label></div>
  <div class="qs" id="qxBox">
  </div>
  <div class="btn">
    <button id="query">选择</button>
    <button id="cancel">取消</button>
  </div>
</div>
<script>
  const regexData = [
    { title: "自定义", regex: "" },
    { title: "货币（2位小数、可能有逗号)", regex: "^-?([0-9]+|[0-9]{1,3}(,[0-9]{3})*)(.[0-9]{1,2})?$" },
    { title: "'-'开头的", regex: "^-.*$" },
    { title: "邮箱地址", regex: "^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$" },
    { title: "身份证号(15位、18位数字)", regex: "(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)" },
    { title: "包含中文", regex: "[\u4E00-\u9FA5]" },
    { title: "电话号码", regex: "^(\(\d{3,4}-)|\d{3.4}-)?\d{7,8}$" },
    { title: "IPv4地址", regex: "d+.d+.d+.d+" },
    { title: "手机号", regex: "^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$" },
    { title: "国内电话号码", regex: "\d{3}-\d{8}|\d{4}-\d{7}" },
    { title: "日期格式yyyy-mm-dd", regex: "^\d{4}-\d{1,2}-\d{1,2}" }
  ];
  const qsBox = document.getElementById('qxBox');
  const textbox = document.getElementById('regex');
  regexData.map((d) => {
    qsBox.innerHTML +=
      ['<div onclick="quickSelect(this,\'', d.regex, '\')" ><input type="radio" name="qs" /><label>', d.title, '</label></div>'].join('');
  });
  function quickSelect(el, val) {
    var r1 = el.querySelector('input[type="radio"]');
    r1.checked = true;

    if (val === '') {
      textbox.removeAttribute('disabled');
    } else {
      textbox.value = val;
      textbox.setAttribute('disabled', true);
    }
  }
  document.getElementById('query').onclick = () => {
    const regex = textbox.value;
    if (regex === '') {
      alert('请选择条件');
      return;
    }
    parent.postMessage({ pluginMessage: { type: 'query', regex } }, '*')
  }

  document.getElementById('cancel').onclick = () => {
    parent.postMessage({ pluginMessage: { type: 'cancel' } }, '*')
  }
</script>